<template>
	<div class="singer-res">
		<Singerlist :singerlist="singerRes" />
		<Pagination :total="singerResCount" :page-size="30" @handleCurrentChange="getSearchSingerBy" />
	</div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { getSearchSinger } from '@/network/searchdetail/searchdeatil';
import Singerlist from '@/components/content/singerlist/Singerlist.vue';

// 定义响应式变量
const keywords = ref('');
const singerRes = ref([]);
const singerResCount = ref(0);

// 获取路由参数
const route = useRoute();

// 在组件挂载时获取数据
onMounted(() => {
  // 保存搜索的关键词
  keywords.value = route.params.keywords;
  getSearchSingerBy();
});

// 获取搜索歌手的方法
const getSearchSingerBy = async (page = 1) => {
      let offset = (page - 1) * 30;
      try {
        const res = await getSearchSinger(keywords.value, offset);
        singerRes.value = res.data.result.artists;
        singerResCount.value = res.data.result.artistCount;
      } catch (error) {
      }
    };



</script>

<style lang="less" scoped>
.result {
	padding: 10px 0px 15px;
}
</style>
